<template>
  <div class="hello">
    <el-tree
      :check-strictly="true"
      :default-checked-keys="menuIdecho"
      :data="directorylist"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="permissionTree"
      highlight-current
      :expand-on-click-node="false"
      :props="defaultProps"
      @check-change="checkChange"
      @check="clickDeal">
    </el-tree>
  </div>
</template>

<script>
export default {
  methods: {
    // tree 父关联子不关联父样式---开始
    clickDeal (currentObj, treeStatus) {
      console.log('currentObj', currentObj)
      console.log('treeStatus', treeStatus)
      let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中
      // 选中
      if (selected !== -1) {
        // 子节点只要被选中父节点就被选中
        this.selectedParent(currentObj)
        // 统一处理子节点为相同的勾选状态
        this.uniteChildSame(currentObj, true)
      } else {
        // 未选中 处理子节点全部未选中
        if (currentObj.childList && currentObj.childList.length !== 0) {
          this.uniteChildSame(currentObj, false)
        }
        // this.uniteChildSame(currentObj, false)
      }
      // this.handleChange()
    },
    // 统一处理子节点为相同的勾选状态
    uniteChildSame (treeList, isSelected) {
      this.$refs.permissionTree.setChecked(treeList.id, isSelected)
      if (treeList.childList) {
        for (let i = 0; i < treeList.childList.length; i++) {
          this.uniteChildSame(treeList.childList[i], isSelected)
        }
      }
    },
    // 统一处理父节点为选中
    selectedParent (currentObj) {
      let currentNode = this.$refs.permissionTree.getNode(currentObj)
      if (currentNode.parent.key !== undefined) {
        this.$refs.permissionTree.setChecked(currentNode.parent, true)
        this.selectedParent(currentNode.parent)
      }
    },
    // tree 父关联子不关联父样式---结束
    // tree 父关联子不关联父真是数据
    checkChange () {
      this.checkedEquipments = [...this.$refs.permissionTree.getCheckedKeys(), ...this.$refs.permissionTree.getHalfCheckedKeys()]
      console.log('checkedEquipments', this.checkedEquipments)
      this.menuIds = this.checkedEquipments.join(',')
      console.log('menuIds', this.menuIds)
      this.handleChange()
    }
  },

  data () {
    return {
      // 联动
      menuIdecho: [], // 回显
      checkedEquipments: [], // 随意修改后的checked项（即要传到后台的变更数据）
      menuIds: [],
      directorylist: [{
        id: 1,
        label: '一级 1',
        childList: [{
          id: 4,
          label: '二级 1-1',
          childList: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        childList: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        childList: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'childList',
        label: 'label'
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
